<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <!-- <style>
        p {
            color: blue;
            font: 40px;
        }
    </style>
    <p >
        这是一个段落
    </p>
    <p>
        这是另一个段落
    </p>   
    <div>
        这是一个div
    </div>
    <br>
    <br>

    <style>
        /* 此处定义了一个 CSS 类, 名字就叫做 one , CSS 类定义的时候需要使用. 开头 */
        .one {
            color:red;
        }
        .two {
            color:blue
        }
        .thread {
            color: black;
        }
        .four {
            color: blueviolet;
        }
        .five {
            font-size: 50px;
        }
    </style>
    <div class="one five">
        这是第一个div
    </div>
    <div class="two">
        这是第二个div
    </div>
    <div class="thread">
        这是第三个div
    </div>
    <div class="four">
        这是第四个div
    </div> -->
<!-- 
    <style>
        #oneDiv{
            color: red;
        }
    </style>

    <div id="oneDiv">
        这是一个div
    </div>
    <div id="twoDiv">
        这是一个div
    </div> -->

    <!-- <style>
        .one li {
            color: blue;
        }
    </style>

    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ol>
    <ul class="one">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul> -->
<!-- 
    <style>
        .one>li {
            color: blue;
        }
    </style>

    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ol>
    <ul class="one">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul> -->

   <!-- <style>
    .one>a {
        color: red;
    }
   </style> -->

   <!-- <style>
    /* .two {
        font-size: 40px;
    }
    .three {
        font-size: 40px;
    } */
    .two, .three {
        font-size: 40px;
    }


   </style>

    <div class="one">
        <a href="#" class="two">链接1</a>
        <p>
            <a href="#" class="three">链接2</a> 
        </p>
    </div> -->

    <!-- <style>
        .one:hover {
            color:green;
            font-size: 70px;
            
        }
        .one:active {
            color: blueviolet;
            font-size: 90px;
        }
    </style> -->

    <!-- <style>
        .one {
            font-size: 40px;
            font-family: '微软雅黑';
            /* color: black; */
            /* background-color: #ff00ff; */
            height: 800px;
            background-image: url(xiangrikui.jpg);
            background-repeat: no-repeat;
            /* 顶端居中 */
            background-position: top center;
            /* 水平垂直都居中 */
            background-position: center center;
            /* 右下角 */
            background-position: right bottom; 
            /* 自定义位置 */
            background-position: 15 30;

        }
        .two {
            font-size: 40px;
            font-family: '宋体';
            color: rgb(128,255,50);
            text-decoration: none;
            


        }
        .three {
            font-size: 40px;
            font-family: '黑体';
            color: #ff00ff;


        }
        .four {
            font-size: 40px;
            font-family:'华文行楷';
            color: #f0f;

        }
        
    </style>
    <div class="one">
        这是一个div Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit vitae omnis minus eum illo provident animi, velit debitis dolor assumenda, eaque saepe magnam voluptatem? Similique inventore beatae magni esse praesentium.
    </div>
    <div class="two">
        这是一个div
    </div>
    <div class="three">
        这是一个div
    </div>
    <div class="four">
        这是一个div
    </div> -->

    <!-- <style>
        .one{
        width: 200px;
        height: 100px;
        background-color: orange;
        color: aquamarine;
        text-align: center;
        line-height: 100px;
        /* 矩形效果 */
        /* border-radius: 10px; */
        /* solid 表示的就是实线 */
        border: 5px #6666 solid;

        /* 防止盒子被撑大 */
            box-sizing: border-box;
    }
    
    .two {
        width: 200px;
        height: 100px;
        background-color: orange;
        color: aquamarine;
        line-height: 100px;
        border: 5px #6666 dashed;

    }
    .three {
            width: 200px;
        height: 100px;
        background-color: orange;
        color: aquamarine;
        line-height: 100px;
        border: 5px #6666 dotted ;
    }
    </style>
    <div class="one">
        这是一个div
    </div>
    <br>
    <div class="two">
        这是一个div
    </div>
    <br>
    <div class="three">
        这是一个div
    </div> -->
    <!-- <style>
        .one{
        width: 200px;
        height: 100px;
        background-color: orange;
        color: aquamarine;
        text-align: center;
        line-height: 100px;
        border: 5px #6666 solid;
        /* 防止盒子被撑大 */
        box-sizing: border-box;
        padding:  10px;
        margin: ;
    }
    .three {
         width: 50px;   
         height: 50px;
         background-color: red;
         margin-left: auto;
         margin-right:  auto;
         margin-top: auto;
         margin-bottom: auto;

        }
    </style> -->
    <!-- <div class="one">
        
        <div class="three">
           
        </div>
    </div>
     -->

     <style>
        div{
            width: 100%;
            height: 150px;
            background-color: red;
            /* 开启弹性布局 */
            display: flex;
            justify-content: space-around;
            justify-content: space-around;
            align-items: center;
        }
         div>span {
            background-color: green;
            width: 100px;
            height: 100px;
         }
     </style>
     <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
     </div>
</body>
</html>



